안녕하세요, 소플입니다.

최근(2025년 4월 23일) 리액트 팀은 공식 블로그를 통해 두 가지 새로운 실험적 기능을 소개했습니다.

그것은 바로 View Transitions와 Activity인데요,

이번 매거진에서는 리액트의 새로운 실험적 기능인 View Transitions와 Activity에 대해 한 번 살펴보도록 하겠습니다.

---

View Transitions 📌

먼저 View Transitions에 대해 살펴보도록 하겠습니다.

View Transitions란?

View Transitions는 이름 그대로 화면 전환과 관련된 것인데,

리액트 애플리케이션에서 부드러운 화면 전환 애니메이션을 구현할 수 있게 해주는 기능입니다.

여기서 말하는 '화면'이라는 것은 각기 다른 URL을 가지는 웹사이트의 각 페이지를 의미한다고 보면 됩니다.

View Transitions는 웹 브라우저의 View Transition API를 기반으로 하고 있는데,

View Transition API는 서로 다른 화면 간에 전환 애니메이션을 쉽게 만들 수 있게 해주는 API 입니다.

이를 통해 페이지나 컴포넌트 간 부드러운 전환 애니메이션을 쉽게 구현할 수 있습니다.

View Transitions 사용 방법

View Transitions를 사용하기 위해서는 <ViewTransition> 이라는 새로운 리액트 컴포넌트를 사용하면 됩니다.

아래 코드는 <ViewTransition>를 사용하는 예시 코드입니다.

import { unstable_ViewTransition as ViewTransition } from 'react';
import { useRouter } from './router';
import Home from './Home';
import Details from './Details';

export default function App() {
    const { url } = useRouter();

    return (
        <ViewTransition>
            {url === '/' ? <Home /> : <Details />}
        </ViewTransition>
    );
}

위 코드에서는 url의 값에 따라서 <Home /> 컴포넌트가 렌더링 되거나, <Details /> 컴포넌트가 렌더링 됩니다.

그리고 상단에서 <ViewTransition> 컴포넌트로 감싸줌으로써, 화면 전환이 일어날 때 부드러운 전환 애니메이션을 적용할 수 있습니다.

이처럼 전환 애니메이션을 적용할 컴포넌트를 <ViewTransition> 컴포넌트로 감싸주기만 하면 됩니다.

굉장히 간단하죠?😎

View Transitions의 주요 특징

그렇다면 View Transitions는 어떤 특징들을 갖고 있을까요?

첫 번째 특징은 적용하기 굉장히 쉽다는 점입니다.

<ViewTransition> 컴포넌트로 감싸주기만 하면 기본 전환 애니메이션을 쉽게 적용할 수 있습니다.

그리고 두 번째 특징은 언제 애니메이션을 활성화 시킬지 정할 수 있다는 점입니다.

아래와 같이 startTransition() 함수, useDeferredValue() 훅, 또는 <Suspense>를 트리거로 하여 애니메이션을 활성화시킬 수 있습니다.

// Transitions
startTransition(() => setState(...));

// Deferred Values
const deferred = useDeferredValue(value);

// Suspense
<Suspense fallback={<Fallback />}>
    <div>Loading...</div>
</Suspense>

마지막 세 번째 특징은 애니메이션을 커스터마이징 할 수 있다는 점입니다.

CSS를 통해 애니메이션을 정의할 수 있으며, enter, exit, update, share, default와 같은 속성을 사용해 세부적인 전환 효과를 조정 할 수 있습니다.

---

Activity 📌

다음으로 Activity에 대해 살펴보도록 하겠습니다.

Activity란?

Activity는 UI의 일부를 숨기거나 표시할 수 있는 새로운 리액트 컴포넌트입니다.

Android 네이티브 개발을 해보신 분들은 아시겠지만, Android에도 Activity라는 개념이 등장합니다.

Android에서의 Activity는 앱 내의 하나의 화면을 의미하며,

하나의 Activity에서 다른 Activity로 갔다가 다시 돌아올 경우 상태가 그대로 보존됩니다.

그와 비슷하게 리액트에서의 Activity 또한 상태를 유지하면서 컴포넌트를 보여주거나 숨길 수 있게 해주는 기능이라고 이해하면 됩니다.

Activity 사용하면 리액트 컴포넌트의 활성(active) 또는 비활성(inactive) 상태를 명시적으로 관리할 수 있습니다.

그래서 결과적으로 동일한 화면을 표시하기 위해 동일한 작업(데이터 페칭, JavaScript 파싱 등)을 할 필요없이,

화면을 잠시 감춰두었다가 다시 곧바로 보여줄 수 있게 됩니다.

결과적으로 사용자 입장에서는 페이지 간의 탐색이 마치 모바일 앱처럼 굉장히 빠르게 느껴지게 만들 수 있는 것이죠.

Activity 사용 방법

Activity를 사용하기 위해서는 <Activity>라는 컴포넌트로 감싸고,

mode prop을 'active' 또는 'inactive'로 지정해주면 됩니다.

아래 코드는 <Activity>를 사용하는 예시 코드입니다.

import { unstable_Activity as Activity } from 'react';

function App(props) {
    const { isChatVisible } = props;

    return (
        <Activity mode={isChatVisible ? 'active' : 'inactive'}>
            <ChatComponent />
        </Activity>
    );
}

위 코드는 isChatVisible 값에 따라 <ChatComponent />를 활성(active) 또는 비활성(inactive) 상태로 전환합니다.

활성 상태에서는 평소와 동일하게 컴포넌트가 렌더링되며,

비활성 상태에서는 렌더링이 최적화되고, 필요한 경우 백그라운드에서 최소한의 작업만 수행됩니다.

이처럼 Activity를 사용하면 사용자가 사용하지 않는 UI 부분에 대한 상태를 저장하거나,

사용자가 다음에 사용할 가능성이 있는 부분을 미리 렌더링할 수 있습니다.

---

View Transitions와 Activity를 모두 적용한 예시

아래는 View Transitions와 Activity를 모두 적용한 예시 화면입니다.

View Transitions를 사용하여 화면 전환 시 부드러운 애니메이션이 나타나도록 하였고,

Activity를 사용하여 상태를 유지하면서 컴포넌트를 보이거나 감출 수 있도록 하였습니다.

또한 Activity의 Pre-rendering 기능을 통해 다음 페이지 콘텐츠를 미리 렌더링함으로써,

별도의 로딩 애니메이션 없이 다음 페이지의 콘텐츠가 곧바로 나올 수 있도록 하였습니다.

이처럼 View Transitions와 Activity를 활용하면 마치 모바일 네이티브 앱과 같은 부드러운 사용자 경험을 제공할 수 있습니다.

앞으로 이러한 새로운 기능들을 활용한 어떤 웹 애플리케이션들이 나올지 벌써부터 기대가 되네요😎

---

🔗 참고 링크

• https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more
• https://react.dev/reference/react/ViewTransition
• https://react.dev/reference/react/Activity

---

이번 매거진에서는 리액트의 새로운 실험적 기능인 View Transitions와 Activity에 대해 살펴보았습니다.

앞으로 이러한 새로운 기능들로 인해 리액트로 구현할 수 있는 화면과 사용자 경험이 대폭 증대되지 않을까 싶습니다.

저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀